<template>
  <div
    class="derOnlyOneContainer _containers"
    :style="{
      transformOrigin: 'top left',
      left: `${left}px`,
      top: `${top}px`,
    }"
  >
    <div v-if="startPage" class="start_page">
      <CommonBox location="start" @onItemClick="onHideStart"></CommonBox>
    </div>
    <MyCanvas v-else ref="canvas" :dir="dir"></MyCanvas>
    <Title title="思维导图" @close="close" @getPosition="getPosition">
      <div class="modeContainer" v-if="!startPage">
        <div :class="`modeBox ${dir == 'H' && 'modeSelect'}`" @click="onHideStart('H')">
          <icon-font type="icon-daotu1" class="iconfont" />
        </div>
        <div :class="`modeBox ${dir == 'V' && 'modeSelect'}`" @click="onHideStart('V')">
          <icon-font type="icon-daotu2" class="iconfont" />
        </div>
      </div>
    </Title>
  </div>
</template>

<script>
import CommonBox from './commonBox.vue';
import MyCanvas from './myCanvas.vue';
import closeIcon from '../../../assets/teaching/close.svg';
import Title from '../panel/title.vue';

export default {
  components: { CommonBox, MyCanvas, Title },
  props: { value: Boolean },
  data() {
    return {
      startPage: true,
      dir: '',
      left: 0,
      top: 0,
      status: false,
      closeIcon,
    };
  },
  watch: {},
  created() {},

  methods: {
    onHideStart(dir) {
      // 销毁mycanvas
      this.startPage = false;
      this.dir = dir;
    },

    // Title 组件返回的 x, y值
    getPosition({ x, y }) {
      this.left = x;
      this.top = y;
    },
    close() {
      this.startPage = false;
      this.$emit('close');
    },
  },
};
</script>
<style lang="scss" scoped>
._containers {
  width: 60em; /* 880px converted to em */
  min-height: 36.25em; /* 580px converted to em */
  background: #fff;
  box-shadow: 0px 0px 1em 0px rgba(0, 0, 0, 0.1);
  position: relative;
  box-sizing: border-box;
  border-radius: 0.875em; /* 7px converted to em */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  // cursor: move;

  .start_page {
    flex: 1;
    display: flex;
    background: #fff;
    flex-direction: column; /* 将子元素垂直排列 */
    justify-content: center; /* 在垂直方向上居中对齐 */
    align-items: center; /* 在水平方向上居中对齐 */

    .start_one {
      font-size: 1.375em; /* 22px converted to em */
    }
  }

  .modeContainer {
    display: flex;
    margin-left: 20px;
    align-items: center;
    cursor: pointer;
    box-sizing: border-box;

    .modeBox {
      width: 40px;
      height: 40px;
      border: 1px solid #000000;
      background: #ffffff;
      border-radius: 8px;
      margin-right: 16px;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;

      .iconfont {
        font-size: 20px;
      }
    }

    .modeSelect {
      border: 1px solid #ff8500;
      .iconfont {
        color: #ff8500;
      }
    }
  }
}
</style>
